<script setup lang="ts">
import { reactive, onMounted, watch } from 'vue';
import { eventCenter, getCurrentInstance, navigateTo } from '@tarojs/taro';
import IMG_ICON_APPS4 from '/@/assets/image/icon/apps-4.png';
import { APP_MENU_HOMEPAGE_QUERY } from '/@/api/modules/base/app-menu';
import { INDEX_TOTAL } from '/@/api/modules/workbench/workbench';
import { getSysImgUrl } from '/@/utils/index';
import { scanMenu } from '/@/utils/scan';
const state = reactive<{
  list: AppMenu.Dto[];
  /**
   * 首页统计数据
   */
  indexTotal: WorkbenchApi.IndexTotalResp;
}>({
  list: [],
  indexTotal: {},
});

const props = withDefaults(
  defineProps<{
    /**
     * 1 web
     * 2 后勤
     * 3 员工
     */
    rolePlatform?: 1 | 2 | 3;
    /**
     * 是否刷新
     */
    refresh?: boolean;
  }>(),
  {
    rolePlatform: 3,
    theme: 'default',
    refresh: false,
  },
);

const emits = defineEmits<{
  (e: 'refresh'): void;
}>();

/**
 * @function 获取菜单项徽标值
 * @param forword
 */
function getMenuItemBadgeValue(forword: string) {
  if (!forword) return '';

  return (
    {
      '/pages/work-order/list/index': state.indexTotal.workOrderQuantity,
      '/pages/inspection/list/index': state.indexTotal.planTaskQuantity1,
      '/pages/maintenance/list/index': state.indexTotal.planTaskQuantity2,
      '/pages/cleaning/list/index': state.indexTotal.planTaskQuantity3,
      '/pages/alarm/list/index': state.indexTotal.msgAlarmQuantity,
      '/pages/msg/list/index': state.indexTotal.messageQuantity,
    }[forword] || ''
  );
}

/**
 * @function 选择菜单
 * @param menuItem
 */
function selectedMenuItem(menuItem: AppMenu.Dto) {
  if (menuItem.forword && menuItem.jumpLogic === 1) {
    //如果是扫一扫功能直接用钉钉的扫一扫
    if (menuItem.name === '扫一扫') {
      scanMenu();
    } else {
      navigateTo({ url: menuItem.forword });
    }
  } else if (menuItem.forword && menuItem.jumpLogic === 2) {
    window.location.href = menuItem.forword;
  }
}

function initPage() {
  APP_MENU_HOMEPAGE_QUERY({ rolePlatform: props.rolePlatform }).then((res) => {
    state.list = res.dto || [];
    emits('refresh');
  });

  INDEX_TOTAL({}).then((res) => {
    state.indexTotal.workOrderQuantity = res.workOrderQuantity;
    state.indexTotal.planTaskQuantity1 = res.planTaskQuantity1;
    state.indexTotal.planTaskQuantity2 = res.planTaskQuantity2;
    state.indexTotal.planTaskQuantity3 = res.planTaskQuantity3;
    state.indexTotal.msgAlarmQuantity = res.msgAlarmQuantity;
    state.indexTotal.messageQuantity = res.messageQuantity;
  });
}

onMounted(() => {
  initPage();

  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    initPage();
  });
});

watch(props, (newProps) => {
  if (newProps.refresh) {
    initPage();
  }
});
</script>

<template>
  <view class="home-hgy-utils">
    <!-- <view class="home-hgy-utils__title">我的工具</view> -->
    <nut-grid class="home-hgy-utils__wrapper" column-num="4" :border="false">
      <nut-grid-item
        v-for="item in state.list"
        :key="item.id"
        :text="item.name"
        @click="selectedMenuItem(item)"
      >
        <nut-badge :value="getMenuItemBadgeValue(item.forword)" color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="getSysImgUrl(item.imgBase64, true)" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
      <nut-grid-item text="全部应用" @click="navigateTo({ url: '/pages/all-utils/index-v2' })">
        <nut-badge value="" color="#ff3e3e">
          <nut-avatar shape="square" bg-color="transparent">
            <image :src="IMG_ICON_APPS4" />
          </nut-avatar>
        </nut-badge>
      </nut-grid-item>
    </nut-grid>
  </view>
</template>

<style lang="scss">
.home-hgy-utils {
  margin-bottom: 20px;
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;

  &__title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
</style>
